<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
  </head>
  <body>
    <div class="flex bg-gray-100 h-[300px] w-[800px]">
      <div class="flex-item w-[200px] h-full flex items-center shrink-[1]">Item 1</div>
      <div class="flex-item w-[300px] h-full flex items-center shrink-[2]">Item 2</div>
      <div class="flex-item w-[400px] h-full flex items-center shrink-[3]">Item 3</div>
      <div class="flex-item w-[500px] h-full flex items-center shrink-[4]">Item 4</div>
    </div>
  </body>
  <script>
    /* 
      flex-shrink 定义了当容器空间不足时，子项目如何缩小
      比如: 容器大小为800px，4个子元素宽度分别为200px, 300px, 400px, 500px
      总宽度为200 + 300 + 400 + 500 = 1400px
      溢出空间为1400 - 800 = 600px
      如果第一个元素的flex-shrink为1，第二个为2，第三个为3，第四个为4
      计算缩小因子
      第一个: 1 * 200 = 200
      第二个: 2 * 300 = 600
      第三个: 3 * 400 = 1200
      第四个: 4 * 500 = 2000
      总缩小因子为200 + 600 + 1200 + 2000 = 4000
      那么每个元素缩小的空间为:
      公式: ( 子项目的缩小因子 / 总缩小因子 ) * 溢出空间 = 子项目缩小的宽度
      例如: 第一个元素: (200 / 4000) * 600 = 30px
      子项目的最终宽度为: ( 初始的宽度 - 子项目缩小的宽度 ) 
      那么第一个元素的最终宽度为: 200 - 30 = 170px
    */
  </script>
</html>
